<template>
	<view class="page-container">
		<view class="title">
			<u-avatar size="60" :src="'http://localhost:8081' + userInfo.userAvatar" shape="square"></u-avatar>
			<view class="info">
				<text style="line-height: 45rpx;">{{ userInfo.userName }}</text>
				<text style="line-height: 45rpx;">id：{{ userInfo.userCode }}</text>
				<u-tag :text="userInfo.roleName" plain size="mini" type="primary" style="width: 80rpx;"></u-tag>
			</view>
		</view>
		<u-cell-group>
			<u-cell icon="edit-pen-fill" title="信息完善" isLink @click="navigateTo('/pages/profile/profile')"></u-cell>
			<u-cell icon="lock-fill" title="修改密码" isLink @click="navigateTo('/pages/password/password')"></u-cell>
			<u-cell icon="setting-fill" title="退出登录" isLink @click="show = true"></u-cell>
		</u-cell-group>
		<u-modal :show="show" :title="title" :content='content' @confirm="confirm"></u-modal>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: uni.getStorageSync("user-profile"),
				title: '温馨提示',
				content: '您确定要退出登录吗',
				show: false
			};
		},
		methods: {
			confirm() {
				this.show = false
				uni.reLaunch({
					url:'/pages/login/login'
				})
				uni.setStorageSync('user-token', '')
				uni.setStorageSync('user-profile', {})
			},
			navigateTo(url) {
				uni.navigateTo({
					url:url
				})
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #F8F8F8;

		.title {
			padding: 20rpx;
			display: flex;
			align-items: center;
			background-color: #ffffff;
			.info {
				margin-left: 20rpx;
				display: flex;
				flex-direction: column;
				color: #909399;
				font-size: 24rpx;
			}
		}
		.u-cell {
			margin-top: 20rpx;
			background-color: white;
		}
	}
</style>